import { useCallback, useRef, useEffect, useMemo } from "react"
import i18n from "i18n-js"
import { observer } from "mobx-react"
import { FC } from "@tarojs/taro"
import { View, Text, Image } from "@tarojs/components"
import PageContainer from "@/components/PageContainer"
import FlexScrollView from "@/components/FlexScrollView"
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode"
import ProductConfig, {
  networkConfigTypes,
  getConfigsSupportConfigNetwork,
} from "@/config/product"
import languageModel from "@/models/language"
import { showCategory } from '@/config/template'
import BTWifiConfigView from './BTWifiConfigView'
import configWifiModel from './models/configWifi'
import CategoryList from "./CategoryList"

const dstyles = GStyleSheet.create({
  page: {
    backgroundColor: DynamicColors.normalBackgroundColor,
  },
  container: {
    width: "100%",
    height: "100%",
    flexDirection: "column",
    justifyContent: "flex-start",
    background: DynamicColors.normalBackgroundColor,
    // padding: '32rpx',
    // paddingBottom: 0,
    // boxSizing: 'border-box',
    borderTop: "1rpx solid rgba(0,0,0,0.1)",
  },
  line: {
    width: "100%",
    backgroundColor: DynamicColors.screenBackgroundGaryColor,
    height: 10,
  },
  shortShow: {},
  list: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    position: "relative",
    right: "-16rpx",
  },
  item: {
    width: "24%",
    flexDirection: "column",
    marginBottom: 10,
  },
  icon: {
    width: 40,
    height: 40,
  },
  text: {
    color: DynamicColors.normalTextColor,
    height: 44,
    textAlign: "center",
  },
})

const ConfigDevicePage: FC = () => {
  const styles = dstyles.useDynamicStyle();
  const productListRef = useRef(getConfigsSupportConfigNetwork().filter((p) => !p.disableProductList));
  const showCategoryRef = useRef(showCategory())

  console.log('productListRef.current', productListRef.current)
  const haveBLEConfig = useMemo(() => {
    return (
      productListRef.current.findIndex((i) =>
        i.networkConfigType.includes(
          networkConfigTypes.TNetworkConfigTypeBTWifi
        )
      ) > -1
    );
  }, [])

  const goToWifiSelect = useCallback((p) => {
    configWifiModel.curPk = p.productKey
    configWifiModel.goToConfig(p)
  }, [])

  useEffect(() => {
    return () => {
      configWifiModel.clearData();
    }
  }, [])

  return (
    <PageContainer title={i18n.t("ADD_DEVICE")} style={styles.page}>
      <View style={styles.container} className='centerFlex'>
        {haveBLEConfig && <BTWifiConfigView />}
        <View style={styles.line} />
        {showCategoryRef.current ? <CategoryList /> :
          <View style={{ flex: 1, width: '100%', overflow: 'hidden' }}>
            <FlexScrollView id='productList'>
              <View style={styles.list}>
                {productListRef.current.map((product) => {
                  return <View key={product.productKey} style={styles.item} className='centerFlex' onClick={() => { goToWifiSelect(product) }}>
                    <Image src={product.icon} style={styles.icon} mode='aspectFit' />
                    <Text style={styles.text} className='linesText'>{ProductConfig.getProductNameFromConfig(languageModel.key, product)}</Text>
                  </View>
                })}
              </View>
            </FlexScrollView>
          </View>}
      </View>
    </PageContainer>
  );
};

export default observer(ConfigDevicePage)
